<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <script>
        var t = "[[${target}]]"
        console.log(t);
        var ws = new WebSocket("ws://[[${webSocketEndPoint}]]:8080/websocket/"+t);
        //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
        ws.onopen = function(){
            //当WebSocket创建成功时，触发onopen事件
            console.log("open");
            setInterval("clock()",10);
        }
        ws.onmessage = function(e){
            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            console.log(e.data);
            window.URL = window.URL || window.webkitURL;
            var source = window.URL.createObjectURL(e.data);
            console.log(source);
            document.getElementById("camShow").src=source;
        }
        ws.onclose = function(e){
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log("close");
        }
        ws.onerror = function(e){
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log(error);
        }
        function clock(){
            ws.send("poll");
            console.log("send end");
        }


    </script>
</head>
<body>
<h1>camera</h1>
<div>
    <img src="../img/closeCam.webp" alt="alt" id="camShow">
</div>
</body>